<template>
	<view class="main">
		<!-- #ifndef H5 -->
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">我的海报</block>
		</cu-custom>
		<!-- #endif -->
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view v-if="is_qr_code" style="position: relative;">
				<canvas 
					class="canvas"
					canvas-id="cardPoster"
					:style="[posterStyle]"></canvas>
				<view class="poster-img">
					<image class="img" :src="posterImg" mode="widthFix" />
				</view>
				<!-- #ifndef H5 -->
				<view style="width: 750rpx; height: 150rpx;"></view>
				<view class="share_a">
					<view class="share_a_a" @click="saveImg">保存相册</view>
				</view>
				<!-- #endif -->
				<view class="share_aa" @click="goPage('/pages/notice/info?id=8')">活动规则</view>
				<view class="share_aa" style="top:44%" @click="goPage('/pages/user/user_share_list')">邀请记录</view>
			</view>
			<view v-else>
				<view class="details-null column-center" style="margin-top: 200rpx;">
					<image class="img-null" src="/static/goods_null.png"></image>
					<view class="xs muted" @click="qr_code_click">您还未授权用户端账户，<span style="color: #D3195E;">请点击前往授权</span></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Draw from '@/uni_modules/sakura-canvas/js_sdk/index'
	import request from '@/common/request.js';
	import storage from '@/common/storage.js';
	export default {
		data() {
			return {
				showLoading:true,
				is_qr_code:false,
				share_img: '/static/2.png',
				user_qr_code:'',
				posterStyle: {
					width: '10px',
					height: '10px'
				},
				posterImg: '',
				distribution_code:'',
				baseUrl_img:request.baseUrl_img,
				activity_id:'',
				uid:0
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.uid=uni.getStorageSync('uid');
		},
		onShow(){
			this.distribution_code=storage.currentUser.distribution_code;
		},
		mounted() {
			this.share_config_post()
		},
		methods: {
			goPage(url) {
				if (!this.$util.isLogin()) {
					return;
				}
				uni.navigateTo({
					url
				});
			},
			qr_code_click(){
				wx.navigateToMiniProgram({
					appId: 'wx1a1199576342b933',
					path: 'pages/user/info',
					//develop开发版；trial体验版；release正式版
					envVersion: 'release', 
					success(res) {
					  // 打开成功
					  console.log("跳转小程序成功！",res);
					} 
				})
			},
			saveShare(){
				let _this=this;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: _this.posterImg,
					success: function (res) {
						//console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						//console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			saveImg(){
				let _this=this;
				uni.saveImageToPhotosAlbum({
					filePath:_this.posterImg,
					success() {
						uni.showToast({
						    title:'保存成功',
							icon:'none',
						    duration: 2000
						});
					},
					fail(rej){
						console.log(rej);
						uni.showToast({
						    title:'保存失败',
							icon:'none',
						    duration: 2000
						});
					}
				})
			},
			share_config_post(){
				let paramsList = {
					uid:this.uid
				}
				let optsList = {
					url: 'p-share_config',
					method: 'post'
				};
				let _this=this;
				request.httpTokenRequest(optsList, paramsList).then(res => {
					if(res.data.code == 200){
						_this.share_img=res.data.data.user_share_img
						_this.user_qr_code=storage.currentUser.distribution_mnp_qr_code
						_this.$nextTick(() => {
							_this.createDraw()
						})
						_this.is_qr_code=true;
					}
					_this.showLoading=false;
				});
			},
			// 创建draw绘制对象
			createDraw() {
				this.draw = new Draw({
					width: 750,
					height: 1340,
					unit: 'rpx',
					_this: this,
					canvasId: 'cardPoster',
					background: {
						type: 'color',
						color: '#FD8257',
						w: 750,
						h: 1340,
						r: 20
					}
				})
				this.$nextTick(() => {
					this.drawCanvas()
				})
			},

			// 绘制内容
			async drawCanvas() {
				let { draw, share_img,baseUrl_img,user_qr_code,distribution_code,activity_id} = this
				let res = await draw.createdSharePoster(({ ctxObj, style }) => {
					let { width, height } = ctxObj
					this.posterStyle = style
					// 距离x轴的距离
					let offsetX = 30
					let offsetY = 20
					// 商品图
					let goodsImg = {
						name: 'goodsImg',
						type: 'image',
						drawType: 'rect',
						src:share_img,
						w: 750,
						h: 1340,
						x:0,
						y:0
					}
					// 商品标签数组
					//let goodsTagsArray = this.getGoodsTags(offsetX * 2, 990)
					// 二维码图
					let qcCode = {
						name: 'qcCode',
						type: 'image',
						src:user_qr_code,
						w: 260,
						h: 260,
						x:160,
						y:980
					}
					return [goodsImg, qcCode]
				})
				if (!res.success) return
				this.posterImg = res.data
				this.showLoading=false;
            },
		}
	}
</script>

<style lang="scss" scoped>
	button::after{
		border: 0;
	}
	.share_a{
		width: 750rpx;
		height: 150rpx;
		position: fixed;
		background-color: #ffffff;
		bottom: 0;
	}
	.share_a_a{
		width: 610rpx;
		height: 80rpx;
		background:#734FB5;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		margin: auto;
		margin-top: 40rpx;
	}
	
	.canvas{
		width: 750rpx;
		height: auto;
	}
	.poster-img{
		width: 750rpx;
		height: auto;
		margin:auto;
		display: none;
		.img{
			width: 100%;
			margin-top: 0;
		}
	}
	.share_aa{
		position: fixed;
		right: 0;
		border: 1rpx solid #fff;
		width: 65rpx;
		height: 152rpx;
		top: 30%;
		text-align: center;
		background-color: #fff;
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 37rpx;
		color: #3D3D3D;
		padding: 0 20rpx;
		border-radius: 10rpx 0 0 10rpx;
	}
</style>